.a,
#b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}
button:hover {
  border: 1px solid red;
}
.class {
  color: black;
}
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}
#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
pre {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
  background-color: white;
  color: #008000;
}
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  box-shadow: 2px 5px 1px #000;
}
.class {
  color-2: light;
  padding-2: #888;
  color-3: light;
  padding-3: #888;
  margin: 2 2 2 2;
  color: #a2a2a2;
  display: block;
}
div {
  padding: 33px;
}
.box {
  my-value: bar;
}
.box {
  my-value: foo;
}
.class {
  margin: in-mixin in-mixin;
}
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}
.class1 {
  color-1: #ddd;
  color-2: #ddd;
  padding-2: 2;
  background-color: black;
  color: #ddd;
}
.class2 {
  color-1: #555;
  color-2: #555;
  padding-2: 2;
  background-color: white;
  color: #555;
}
